<template>
    <div class="marketing-add">
        <div class="head-title">
            <div class="left-box">
                <i class="el-icon-arrow-left" @click="backFun"></i>
                <span>{{ is_next == 'add' ? "新建拼团优惠" : "选择产品" }}</span>
            </div>
            <div class="right-box" v-show="is_next">
                <!-- <i class="el-icon-plus" @click="openGoodList"></i> -->
                <el-button size="mini" type="primary" @click="openGoodList">添加产品</el-button>
                <el-button size="mini" type="primary" @click="openProjectList">添加服务</el-button>
            </div>
        </div>
        <div class="text-box" v-if="is_next">
            <span>{{ infoForm.tpl_ls == 1 ? "列表展示" : "并列展示" }}</span>
            <span>{{
                infoForm.sort_type == 1
                    ? "按默认添加时间"
                    : infoForm.sort_type == 2
                    ? "价格从低到高"
                    : "价格从高到低"
            }}</span>
            <span>已选{{ gd_ls.length }}个产品</span>
        </div>
        <div class="info-box">
            <!-- 信息填写 -->
            <div class="form-box comm-list" v-show="is_next == 'add'">
                <el-form
                    ref="infoForm"
                    class="el-form-box"
                    :model="infoForm"
                    label-width="80px"
                    :rules="rules"
                >
                    <el-form-item label="使用云店" prop="shopid_yd">
                        <el-select
                            v-model="infoForm.shopid_yd"
                            placeholder="请选择云店"
                        >
                            <el-option
                                v-for="(item, index) in yd_data"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动标题" prop="title">
                        <el-input
                            v-model="infoForm.title"
                            class="input-w"
                            placeholder="请填写活动标题名称, 20个文字内"
                            maxlength="20"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="desc">
                        <el-input
                            v-model="infoForm.desc"
                            class="input-w"
                            placeholder="请填写活动描述, 50个文字内"
                            maxlength="50"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="拼团人数" prop="num_ok">
                        <el-select
                            v-model="infoForm.num_ok"
                            placeholder="请选择拼团人数"
                        >
                            <el-option
                                v-for="(item, index) in num_ok_data"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时效" prop="hdsxData">
                        <el-input
                            v-model="infoForm.hdsxData"
                            class="input-wsx"
                            placeholder="请选择活动时效"
                            @focus="setTimeFun"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="活动说明">
                        <el-input
                            v-model="infoForm.txt_info"
                            class="input-w"
                            placeholder="请填写活动说明"
                            type="textarea"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="活动规则">
                        <el-input
                            v-model="infoForm.txt_rule"
                            class="input-w"
                            placeholder="请填写活动规则"
                            type="textarea"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="活动模板">
                        <div class="mb-box">
                            <div class="title">广告背景颜色</div>
                            <el-radio-group v-model="infoForm.tpl_color">
                                <div class="color-box">
                                    <div
                                        class="color-row"
                                        v-for="item in color_data"
                                        :key="item.id"
                                        @click="switchColorFun(item.id)"
                                    >
                                        <div
                                            class="background-item"
                                            :style="{
                                                backgroundColor: item.color,
                                            }"
                                        ></div>
                                        <div class="color-title">
                                            {{ item.name }}
                                        </div>
                                        <el-radio :label="item.id"></el-radio>
                                    </div>
                                </div>
                            </el-radio-group>
                        </div>
                        <div class="mb-box">
                            <div class="title">产品排列方式</div>
                            <el-radio-group v-model="infoForm.tpl_ls">
                                <div
                                    class="pl-box"
                                    @click="infoForm.tpl_ls = '1'"
                                >
                                    <img
                                        :src="
                                            infoForm.tpl_ls == 1
                                                ? iconlb1
                                                : iconlb2
                                        "
                                    />
                                    <span
                                        :style="{
                                            color:
                                                infoForm.tpl_ls == 1
                                                    ? '#459ffd'
                                                    : '',
                                        }"
                                        >列表展示</span
                                    >
                                    <el-radio label="1"></el-radio>
                                </div>
                                <div
                                    class="pl-box"
                                    @click="infoForm.tpl_ls = '2'"
                                >
                                    <img
                                        :src="
                                            infoForm.tpl_ls == 2
                                                ? iconbl1
                                                : iconbl2
                                        "
                                    />
                                    <span
                                        :style="{
                                            color:
                                                infoForm.tpl_ls == 2
                                                    ? '#459ffd'
                                                    : '',
                                        }"
                                        >并列展示</span
                                    >
                                    <el-radio label="2"></el-radio>
                                </div>
                            </el-radio-group>
                        </div>
                        <div class="mb-box">
                            <div class="title">产品排序方式</div>
                            <el-radio-group v-model="infoForm.sort_type">
                                <div
                                    class="pl-box"
                                    @click="infoForm.sort_type = '1'"
                                >
                                    <div class="txt-box">
                                        <img :src="iconcd" />
                                        <span>按默认添加时间</span>
                                    </div>

                                    <el-radio label="1"></el-radio>
                                </div>
                                <div
                                    class="pl-box"
                                    @click="infoForm.sort_type = '2'"
                                >
                                    <div class="txt-box">
                                        <img :src="iconjx" />
                                        <span>价格从低到高</span>
                                    </div>

                                    <el-radio label="2"></el-radio>
                                </div>
                                <div
                                    class="pl-box"
                                    @click="infoForm.sort_type = '3'"
                                >
                                    <div class="txt-box">
                                        <img :src="iconsx" />
                                        <span>价格从高到低</span>
                                    </div>
                                    <el-radio label="3"></el-radio>
                                </div>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="启用">
                        <el-switch
                            v-model="infoForm.status"
                            active-value="1"
                            inactive-value="2"
                        ></el-switch>
                        <span class="tis">启用后不可修改</span>
                    </el-form-item>
                </el-form>
                <div class="foot-box">
                    <div class="foot-box-btn" @click="submitNextFun" v-if="is_next == 'add'">下一步 选择产品（已选{{gd_ls.length}}）</div>
                </div>
            </div>
            <!-- 选择产品 -->
            <div class="good-box comm-list" v-show="is_next == 'goods'">
                <div
                    class="good-row"
                    v-for="(item, index) in gd_ls"
                    :key="index"
                    @click="editSkuinfo(index)"
                >
                    <div class="good-content">
                        <div class="img-box">
                            <img :src="item.img ? item.img : img_buf" alt="" />
                        </div>
                        <div class="content-box">
                            <div class="good-title">{{ item.gd_title }}</div>
                            <div class="doc">
                                <span>划线价 ￥{{ item.pricec }}</span>
                                <span>{{ item.doc }}</span>
                                <span>{{ item.title }}</span>
                            </div>
                            <div class="num-pic">
                                <div class="input-box">
                                    <el-input
                                        v-model="item.price"
                                        size="mini"
                                        class="input-num"
                                    ></el-input>
                                    <span>x</span>
                                    <el-input-number
                                        v-model="item.number"
                                        :min="1"
                                        size="mini"
                                    ></el-input-number>
                                </div>
                                <div class="but-box">
                                    <el-button
                                        type="danger"
                                        size="mini"
                                        @click="deleteSku(index)"
                                        >移除</el-button
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="txt-box" v-if="item.txt">
                        <span>备注: {{ item.txt }}</span>
                    </div>
                </div>
            </div>
            <div class="submit-box" v-show="is_next == 'goods'">
                <div
                    class="next-step"
                    @click="is_next ? submitFun() : submitNextFun()"
                >
                    <span>
                        {{
                            is_next
                                ? `创建活动(已选${gd_ls.length})`
                                : `下一步 选择产品(已选${gd_ls.length})`
                        }}</span
                    >
                </div>
            </div>
        </div>
        
        <!-- 时间选择器 -->
        <dateWin ref="dateWin" @selectDate="selectDate"></dateWin>
        <!-- 产品列表 -->
        <popSelectitemList
            ref="popSelectitemList"
            @determineFun="determineFun"
        ></popSelectitemList>
        <!-- 服务列表 -->
        <popProjectFilling
            ref="popProjectFilling"
        ></popProjectFilling>
    </div>
</template>

<script>
import iconlb1 from "../../static/images/icon-lb-1.png";
import iconlb2 from "../../static/images/icon-lb-2.png";
import iconbl1 from "../../static/images/icon-bl-1.png";
import iconbl2 from "../../static/images/icon-bl-2.png";
import iconcd from "../../static/images/icon-cd.png";
import iconsx from "../../static/images/icon-sx.png";
import iconjx from "../../static/images/icon-jx.png";
import config from "@/js/conf/Config.js";
import staticConst from "@/js/const/StaticConst.js";
import dateWin from "@/components/comm/DateWin.vue";
import popSelectitemList from "./popSelectitemList.vue";
import popProjectFilling from "./popProjectFilling.vue";

export default {
    components: { dateWin, popSelectitemList, popProjectFilling },
    data() {
        return {
            input: 0,
            num: 1,
            img_buf: staticConst.GOOD_IMG,
            iconlb2: iconlb2,
            iconlb1: iconlb1,
            iconbl1: iconbl1,
            iconbl2: iconbl2,
            iconcd: iconcd,
            iconsx: iconsx,
            iconjx: iconjx,
            is_next: true,
            infoForm: {
                id: 0,
                shopid_yd: "",
                title: "",
                desc: "",
                num_ok: "",
                txt_info: "",
                txt_rule: "",
                time_from: "",
                time_to: "",
                tpl_ls: "1",
                sort_type: "1",
                status: "2",
                tpl_color: "1",
                hdsxData: "",
                gd_ls: [],
            },
            gd_ls: [],
            gd_ls_back: [],
            yd_data: [],
            info_data: {},
            num_ok_data: [
                {
                    id: "3",
                    name: "3人",
                },
                {
                    id: "5",
                    name: "5人",
                },
            ],
            color_data: [
                {
                    color: "#ff0000",
                    name: "红色",
                    id: "1",
                },
                {
                    color: "#00aa00",
                    name: "绿色",
                    id: "2",
                },
                {
                    color: "#3388ff",
                    name: "蓝色",
                    id: "3",
                },
                {
                    color: "#cb54f2",
                    name: "紫色",
                    id: "4",
                },
            ],
            rules: {
                shopid_yd: [
                    {
                        required: true,
                        message: "请选择云店",
                        trigger: "change",
                    },
                ],
                title: [
                    {
                        required: true,
                        message: "请填写活动标题",
                        trigger: "blur",
                    },
                ],
                desc: [
                    {
                        required: true,
                        message: "请填写活动描述",
                        trigger: "blur",
                    },
                ],
                num_ok: [
                    {
                        required: true,
                        message: "请选择拼团人数",
                        trigger: "change",
                    },
                ],
                hdsxData: [
                    {
                        required: true,
                        message: "请选择活动时效",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        initData() {
            this.emptyData();
            this.getYdlistFun();
        },
        // 打开sku编辑
        editSkuinfo(index) {
            let data = {};
            this.gd_ls_back.map((v, i) => {
                if (index == i) {
                    data = v;
                }
            });
            data.spec_data.map((vs) => {
                if (vs.list) {
                    vs.list.map((vw) => {
                        if (vw.list) {
                            vw.list.map((vk) => {
                                vk.unit_ls.map((vu, ui) => {
                                    if (
                                        vu.unit_id == data.unit_id &&
                                        vu.specid == data.specid
                                    ) {
                                        vu.pricec = data.pricec;
                                        vu.price = data.price;
                                        vu.number = data.number;
                                        vu.txt = data.txt;
                                        if (ui == index) {
                                            vw.all_num = vu.number;
                                            vw.is_acitve = true;
                                            vs.all_num = vu.number;
                                            vs.is_acitve = true;
                                        }
                                    } else {
                                        vu.pricec = 0;
                                        vu.price = 0;
                                        vu.number = 0;
                                        vu.txt = "";
                                    }
                                });
                            });
                        } else {
                            vw.unit_ls.map((vu, ui) => {
                                if (
                                    vu.unit_id == data.unit_id &&
                                    vu.specid == data.specid
                                ) {
                                    vu.pricec = data.pricec;
                                    vu.price = data.price;
                                    vu.number = data.number;
                                    vu.txt = data.txt;
                                    if (ui == index) {
                                        vw.all_num = vu.number;
                                        vw.is_acitve = true;
                                        vs.all_num = vu.number;
                                        vs.is_acitve = true;
                                    }
                                } else {
                                    vu.pricec = 0;
                                    vu.price = 0;
                                    vu.number = 0;
                                    vu.txt = "";
                                }
                            });
                        }
                    });
                } else {
                    vs.unit_ls.map((vu, ui) => {
                        if (
                            vu.unit_id == data.unit_id &&
                            vu.specid == data.specid
                        ) {
                            vu.pricec = data.pricec;
                            vu.price = data.price;
                            vu.number = data.number;
                            vu.txt = data.txt;
                            if (ui == index) {
                                vs.all_num = vu.number;
                                vs.is_acitve = true;
                            }
                        } else {
                            vu.pricec = 0;
                            vu.price = 0;
                            vu.number = 0;
                            vu.txt = "";
                        }
                    });
                }
            });
            this.$refs.popSelectitemList.editSkuinfo(data);
        },
        // 移除选好sku
        deleteSku(index) {
            this.gd_ls.map((v, i) => {
                if (index == i) {
                    this.gd_ls.splice(i, 1);
                }
            });
        },
        // 选好的sku
        determineFun(data) {
            console.log("选好", data);
            this.gd_ls_back = this.gd_ls_back.concat(data);
            this.gd_ls = this.gd_ls.concat(data);
        },
        // 创建活动
        submitFun() {},
        // 打开产品列表
        openGoodList() {
            const data = {
                shopid_yd: this.infoForm.shopid_yd,
            };
            this.$refs.popSelectitemList.initData(data);
        },
        // 打开服务列表
        openProjectList () {
            this.$refs.popProjectFilling.popProjectFilling_Show = true;
        },
        // 打开时间选择器
        setTimeFun() {
            this.$refs.dateWin.show("show");
        },
        // 获取时间选择器的数据
        selectDate(st, et) {
            this.infoForm.hdsxData = `${st} 至 ${et}`;
            this.infoForm.time_from = `${st} 00:00:00`;
            this.infoForm.time_to = `${et} 23:59:59`;
        },
        switchColorFun(id) {
            this.infoForm.tpl_color = id;
        },
        submitNextFun() {
            console.log("提交的数据", this.infoForm);
            this.$refs.infoForm.validate((valid) => {
                if (valid) {
                    this.is_next = "goods";
                }
            });
        },
        // 获取云店列表
        async getYdlistFun() {
            let url = config.YUN_SHOP_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.yd_data = res.data;
            }
        },
        // 返回
        backFun() {
            if (this.is_next) {
                this.is_next = false;
            } else {
                this.$emit("backFun", 1);
            }
        },
        // 清空数据
        emptyData() {
            this.infoForm = {
                id: 0,
                shopid_yd: "",
                title: "",
                desc: "",
                num_ok: "",
                txt_info: "",
                txt_rule: "",
                time_from: "",
                time_to: "",
                tpl_ls: "1",
                sort_type: "1",
                status: "2",
                tpl_color: "1",
                hdsxData: "",
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.marketing-add {
    width: calc(100% - 621px);
    padding: 10px;
    font-size: 14px;
    position: relative;
    .head-title {
        height: 38px;
        margin-bottom: 14px;
        border-bottom: 2px solid #e4e7ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        i {
            font-size: 20px;
            margin-right: 5px;
            cursor: pointer;
        }
        .right-box {
            i {
                font-size: 26px;
            }
        }
    }
    .input-w {
        width: 80%;
    }
    .input-wsx {
        width: 217px;
    }
    .tis {
        margin-left: 10px;
        font-size: 12px;
        color: #c0c4cc;
    }
    .text-box {
        height: 40px;
        background: #f2f2f2;
        margin-bottom: 22px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        span {
            margin-right: 20px;
        }
    }
    ::v-deep.mb-box {
        margin-bottom: 10px;
        &:last-child {
            margin: 0;
        }

        .el-radio__label {
            display: none;
        }
        .pl-box {
            font-size: 14px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
            span {
                margin-right: 10px;
            }
            img {
                margin-right: 10px;
                width: 25px;
                height: 25px;
            }
            .txt-box {
                width: 145px;
                display: flex;
                align-items: center;
            }
        }
        .color-box {
            display: flex;
            font-size: 14px;
            .color-row {
                margin-right: 10px;
                text-align: center;
                cursor: pointer;
                .color-title {
                    font-size: 12px;
                    margin: 10px 0;
                }
                .background-item {
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }
    .form-box {
        height: calc(100vh - 136px );
        overflow: auto;
        position: relative;
    }
    .good-box {
        height: calc(100vh - 180px);
        overflow: auto;
        .good-row {
            padding: 10px 0;
            border-bottom: 1px solid #ede7e7;
            cursor: pointer;
            &:first-child {
                padding-top: 0;
            }
            &:hover {
                background: #fdf6f6;
            }
            .good-content {
                display: flex;
            }
            .txt-box {
                margin-top: 10px;
                padding: 0 10px;
            }
            .img-box {
                margin-right: 10px;
                border-radius: 5px;
                overflow: hidden;
                width: 100px;
                height: 100px;
                background: #f2f2f2;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .content-box {
                width: calc(100% - 110px);
                .good-title {
                }
                .doc {
                    font-size: 12px;
                    color: #999;
                    margin: 10px 0;
                    span {
                        margin-right: 10px;
                    }
                }
                .num-pic {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .input-box {
                        display: flex;
                        align-items: center;
                    }
                    .but-box {
                        margin-right: 10px;
                    }
                    .input-num {
                        width: 130px;
                    }
                    span {
                        margin: 0 10px;
                    }
                }
            }
        }
    }
    .submit-box {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60px;
        border-top: 1px #e8dcdc solid;
        background: #fff;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        z-index: 999;
        .next-step {
            height: 100%;
            padding: 0 20px;
            background: #3989fc;
            color: #fff;
            display: flex;
            align-items: center;
            cursor: pointer;
            &:hover {
                opacity: 0.9;
            }
        }
    }
    .foot-box {
        width: 100%;
        background-color: #FFFFFF;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        border-top: 1px #e8dcdc solid;
        position: sticky;
        bottom: 0;
        .foot-box-btn {
            height: 60px;
            line-height: 60px;
            padding: 0 20px;
            background-color: #3989fc;
            color: #FFFFFF;
            font-size: 14px;
            cursor: pointer;
        }
    }
}
</style>